{% extends 'base.html' %}
{% load static %}
{% load  sizeformat %}

{% block head %}
    <link rel="stylesheet" type="text/css" href="{% static 'network/vlan_list.css' %}">
{% endblock %}
{% block title %}VLAN列表{% endblock %}

{% block boby %}
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <span class="card-title"><strong>VLAN列表</strong></span>
            </div>
            <div class="card-body" style="min-height: 400px;">
                <table class="table table-vm-list" style="word-wrap:break-word;word-break:break-all;">
                     <thead class="thead-light">
                    <tr>
                        <th>编号</th>
                        <th>VLAN</th>
                        <th>网桥</th>
                        <th>类型</th>
                        <th>标签</th>
                        <th>子网IP</th>
                        <th>子网掩码</th>
                        <th>网关</th>
                        <th>空闲IP</th>
                        <th>状态</th>
                        <th>备注</th>
                        <th>操作选项</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for vlan in vlans %}
                    <tr>
                        <th>{{ vlan.id }}</th>
                        <th>{{ vlan.name }}</th>
                        <th>{{ vlan.br }}</th>
                        <th>{{ vlan.net_type }}</th>
                        <th>{{ vlan.tag_display }}</th>
                        <th>{{ vlan.subnet_ip }}</th>
                        <th>{{ vlan.net_mask }}</th>
                        <th>{{ vlan.gateway }}</th>
                        <th>{{ vlan.free_ip }}</th>
                        {% if vlan.enable %}
                            <th><i class="fa fa-check"></i></th>
                        {% else %}
                            <th><i class="fa fa-times"></i></th>
                        {% endif %}
                        <th>{{ vlan.remarks }}</th>
                        <th>
                            <span><a class="btn btn-sm btn-primary" href="{% url 'network:vlan_add' %}?vlan={{ vlan.id }}">
                                <i class="fa fa-plus"></i> 批量添加IP
                            </a></span>
                            <span><a class="btn btn-sm btn-primary" href="{% url 'network:vlan_show' %}?vlan={{ vlan.id }}">
                                <i class="fa fa-search"></i> 查看IP列表
                            </a></span>
                        </th>
                    </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script type="text/javascript" src="{% static 'network/vlan_list.js' %}"></script>
{% endblock %}

